<template>
  <el-dialog
    :title="lookOrEdit == 1?'新增':lookOrEdit == 2?'编辑':'查看'"
    :destroy-on-close="true"
    :visible.sync="dialogFormVisible"
    @close="close"
    width="80%"
    top="10"
  >
    <div v-loading="loading" class="readonly">
      <el-form :model="form" :rules="rules" ref="form">
        <el-row>
          <el-col :span="24" style="background: #f8fbff;">
            <span class="d-start title">单位信息</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="xm" label="姓名" :label-width="formLabelWidth">
              <el-input v-model.trim="form.xm" autocomplete="off" :disabled="lookOrEdit == 3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="lxdh" label="联系电话" :label-width="formLabelWidth">
              <el-input v-model.trim="form.lxdh" autocomplete="off" :disabled="lookOrEdit == 3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="enterprise">
            <el-form-item prop label="单位名称" :label-width="formLabelWidth">
              <el-select size="medium" v-model="enterprise" placeholder="单位名称" disabled>
                <el-option
                  :value="items.id"
                  v-for="items in resdata.enterprise"
                  :key="items.id"
                  :label="items.dwmc"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-else>
            <el-form-item
              prop="dwmc"
              label="单位名称"
              :label-width="formLabelWidth"
              :rules="[{required:true,message:'该值不能为空', trigger: 'blur'}]"
            >
              <el-select
                size="medium"
                v-model="form.dwmc"
                placeholder="单位名称"
                :disabled="lookOrEdit == 3"
                @change="$refs.form.clearValidate('dwmc')"
              >
                <el-option
                  :value="items.id.toString()"
                  v-for="items in resdata.enterprise"
                  :key="items.id"
                  :label="items.dwmc"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="sfzh" label="身份证号" :label-width="formLabelWidth">
              <el-input v-model.trim="form.sfzh" autocomplete="off" :disabled="lookOrEdit == 3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="jtzz" label="家庭住址" :label-width="formLabelWidth">
              <el-input v-model="form.jtzz" autocomplete="off" :disabled="lookOrEdit == 3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="xjzz" label="现居住地" :label-width="formLabelWidth">
              <el-input v-model="form.xjzz" autocomplete="off" :disabled="lookOrEdit == 3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="dwrz" label="单位任职" :label-width="formLabelWidth">
              <el-input v-model="form.dwrz" autocomplete="off" :disabled="lookOrEdit == 3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="unit" ref="rul" v-if="lookOrEdit != 3">
        <el-row>
          <el-col :span="8">
            <el-form-item prop="zc" label="职称" :label-width="formLabelWidth">
              <el-input v-model="unit.zc" autocomplete="off" :disabled="lookOrEdit == 3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="zsbh" label="证书编号" :label-width="formLabelWidth">
              <el-input v-model="unit.zsbh" autocomplete="off" :disabled="lookOrEdit == 3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="margin-left:20px;">
            <el-button type="success" class="el-icon-plus" @click="add(unit)"></el-button>
          </el-col>
        </el-row>
        <el-divider style="margin-top:0;"></el-divider>
      </el-form>
      <el-form :model="itemss" v-for="(itemss,index) in unitinfos" :key="index">
        <el-row>
          <el-col :span="8">
            <el-form-item prop="name" label="职称" :label-width="formLabelWidth">
              <el-input v-model="itemss.zc" autocomplete="off" :disabled="lookOrEdit == 3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="name" label="证书编号" :label-width="formLabelWidth">
              <el-input v-model="itemss.zsbh" autocomplete="off" :disabled="lookOrEdit == 3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="margin-left:20px;">
            <el-button
              type="success"
              class="el-icon-minus"
              @click="del(index)"
              v-if="lookOrEdit != 3"
            ></el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-row>
        <el-col :span="24" class="d-between" style="background: #f8fbff;">
          <span class="d-start title">项目履历</span>
          <el-button
            size="medium"
            type="success"
            plain
            @click="addForm()"
            v-if="lookOrEdit != 3  && !isShow"
          >新增</el-button>
          <el-button size="medium" type="info" v-if="isShow">新增</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="form.join_sproject" style="width: 100%;" height="300px" ref="tab">
            <el-table-column label="序号" align="center">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>

            <el-table-column label="项目开始日期" align="center">
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.xmksrq"></el-input> -->
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="scope.row.xmksrq"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%"
                  :disabled="lookOrEdit == 3"
                  @input="isAddShow(scope)"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="项目结束日期" align="center">
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.xmjsrq"></el-input> -->
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="scope.row.xmjsrq"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%"
                  :disabled="lookOrEdit == 3"
                  @input="isAddShow(scope)"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="项目名称" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.xmmc"
                  :disabled="lookOrEdit == 3"
                  @input="isAddShow(scope)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="项目任职" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.xmrz"
                  :disabled="lookOrEdit == 3"
                  @input="isAddShow(scope)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              width="200"
              align="center"
              v-if="lookOrEdit != 3"
            >
              <template slot-scope="scope">
                <el-button
                  size="medium"
                  type="danger"
                  plain
                  @click="delForm(scope.row,scope.$index)"
                  v-if="lookOrEdit != 3"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="background: #f8fbff;">
          <span class="d-start title">本次参与项目及标段</span>
        </el-col>
      </el-row>
      <div class="main">
        <el-table :data="form.join_qyxmll" style="width: 100%;" height="300px">
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="join_project.xmmc" label="项目名称" align="center"></el-table-column>
          <el-table-column prop="bdmc" label="标段名称" align="center"></el-table-column>
          <el-table-column prop="join_staff.xm" label="项目经理" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible=false">取 消</el-button>
      <el-button type="primary" @click="save" v-if="lookOrEdit != 3" :loading="loading">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["dialogFormVisible1", "item", "resdata", "lookOrEdit", "enterprise"],
  data() {
    return {
      formLabelWidth: "150px",
      dialogFormVisible: false,
      loading: false,
      rules: {
        xm: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        lxdh: [
          {
            required: true,
            trigger: "blur",
            message: "该值不能为空"
          }
        ],
        // dwmc: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        sfzh: [
          { required: true, message: "该值不能为空", trigger: "blur" }
        ]
      },
      rul: {
        dwrz: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        zc: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        zsbh: [{ required: true, message: "该值不能为空", trigger: "blur" }]
      },
      form: {},
      unit: {},
      unitinfos: [],
      saveHide: false,
      isShow: false
    };
  },
  methods: {
    isAddShow(scope) {
      if (!scope.$index) {
        Object.values(this.form.join_sproject[0]).filter(v => {
          if (v) {
            return v;
          }
        }).length
          ? (this.isShow = false)
          : (this.isShow = true);
      }
    },
    delForm(item, index) {
      this.form.join_sproject.splice(index, 1);
      if (!index) {
        this.isShow = false;
      }
    },
    addForm() {
      this.form.join_sproject.unshift({});
      this.$nextTick(() => {
        this.$refs.tab.doLayout();
      });
      this.isShow = true;
    },
    close() {
      this.$emit("close", this.saveHide);
    },
    add(item) {
      this.$refs.rul.validate(valid => {
        if (valid) {
          this.unitinfos.push(item);
          this.unit = {};
        } else {
          return false;
        }
      });
    },

    del(index) {
      this.unitinfos.splice(index, 1);
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.isShow) {
            this.$message({
              type: "error",
              message: "增加的项目履历不能为空"
            });
            return;
          }
          this.loading = true;
          let form = { ...this.form };
          form.sproject = form.join_sproject.map(v => {
            return {
              xmmc: v.xmmc,
              xmksrq: v.xmksrq,
              xmjsrq: v.xmjsrq,
              xmrz: v.xmrz
            };
          });
          let unitinfos = [...this.unitinfos];
          if (this.unit.zc && this.unit.zsbh) {
            unitinfos.push(this.unit);
          }
          this.unit = {};
          form.unitinfo = JSON.stringify(unitinfos);
          delete form.join_qyxmll;
          delete form.join_sproject;
          delete form.join_enterprise;
          this.$post("/api/Staff/actions", form).then(res => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              this.saveHide = true; // 判断是否是保存
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    }
  },
  mounted() {},
  watch: {
    dialogFormVisible1(news) {
      this.dialogFormVisible = news;
      if (news) {
        this.saveHide = false;
        this.form = this.item;
        this.unit = {};
        this.unitinfos = [];
        this.isShow = false
        if (this.item.unitinfo) {
          this.unitinfos = JSON.parse(this.item.unitinfo);
        }
        if (!this.item.join_sproject) {
          this.form.join_sproject = [];
        }else{
          this.form.join_sproject = [...this.item.join_sproject]
        }
        
        if (this.enterprise) {
          this.form.dwmc = this.enterprise;
        }
      }
    },
    // item(news) {
    //   this.form = news;
    //   this.unit = {};
    //   this.unitinfos = [];
    //   if (news.unitinfo) {
    //     this.unitinfos = JSON.parse(news.unitinfo);
    //   }
    //   if (!news.join_sproject) {
    //     this.form.join_sproject = [];
    //   }
    //   if (this.enterprise) {
    //     this.form.dwmc = this.enterprise;
    //   }
    // }
  },
  computed: {}
};
</script>

<style scoped lang="less">
.title {
  // width: 120px;
  padding: 10px 12px;
  background: #f8fbff;
  font-size: 18px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
  font-weight: 700;
  text-align: left;
  color: #409eff;
}
.main {
  width: 100%;
}
</style>